<template>
	<view class="order_main">
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<view class="top-menu-view">
				<view
					class="menu-topic-view"
					v-for="(item, index) in tabsList"
					:key="index"
					@click="swichMenu(index)"
				>
					<view
						:class="currentTab == index ? 'menu-topic-act' : 'menu-topic'"
						v-if="index == 3 ? lookFee : true"
					>
						<text class="menu-topic-text">{{ item.name }}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<swiper
				class="swiper-box-list"
				:current="currentTab"
				:disable-touch="true"
			>
				<swiper-item class="swiper-topic-list" v-if="orderDetail">
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							v-if="orderDetail"
							@refresherrefresh="onRefresh"
						>
							<view class="list-item_content">
								<view
									class="notice_bar"
									v-if="
										orderDetail.suspendOrder &&
										(store.state.isManager
											? orderDetail.status == 4
											: orderDetail.status == 2)
									"
								>
									<view class="info_filled">!</view>
									当前工单正在挂起，解除挂起状态后才可进行操作！
								</view>
								<view
									class="notice_bar"
									v-else-if="orderDetail?.applyChangeNetworkWaitCheckOrder"
								>
									<view class="info_filled">!</view>
									此工单已申请改派服务商，不可进行任何操作！
								</view>
								<view
									class="notice_bar"
									v-else-if="
										isCallPhone ||
										(!orderDetail.writeCallPhoneResult &&
											orderDetail.callPhoneType == 1 &&
											orderDetail.callPhoneQty > 0)
									"
								>
									<view class="info_filled">!</view>
									预约前请先填写拨打电话结果!
									<span
										style="color: #007cff"
										@click="callPhoneRef.open('bottom')"
									>
										去填写
									</span>
								</view>
								<view class="notice_bar" v-else-if="orderDetail.nodeTimeout">
									<view class="info_filled">!</view>
									当前工单节点已超时{{
										orderDetail.nodeTimeoutLength
									}}！请尽快处理！
								</view>
								<view class="list-item_info">
									<view class="list-item_info_left">
										<view class="list-item_info_left_name_phone">
											<view class="name">
												{{ orderDetail.userName }}
											</view>
											<view class="" style="flex: 1; display: flex; gap: 20rpx">
												<view class="phone">
													{{ setPhone(orderDetail.userPhone) }}
												</view>
												<view
													class="call_status"
													v-if="
														!orderDetail.applyCancelOrderWaitCheck &&
														!orderDetail?.applyChangeNetworkWaitCheckOrder &&
														orderDetail.callPhoneType == 1 &&
														(store.state.isManager
															? orderDetail.status == 4
															: orderDetail.status == 2)
													"
												>
													<span
														style="color: #f53f3f"
														v-if="orderDetail.callPhoneQty == 0"
													>
														未拨打
													</span>
													<span v-else>
														已拨打{{ orderDetail.callPhoneQty }}次
													</span>
												</view>
											</view>
										</view>
										<view class="address">
											{{
												orderDetail.province +
												orderDetail.city +
												orderDetail.area +
												orderDetail.town +
												orderDetail.address
											}}
										</view>
									</view>
									<view class="list-item_info_right">
										<view class="list-item_info_right_btn">
											<uni-icons
												class="bg_btn"
												size="24"
												type="paperplane-filled"
												@click="getLocation"
												color="#007cff"
											></uni-icons>
											<uni-icons
												class="bg_btn"
												size="24"
												type="phone"
												v-if="
													!orderDetail?.applyChangeNetworkWaitCheckOrder &&
													(store.state.isManager
														? orderDetail.status == 4
														: orderDetail.status == 2)
												"
												color="#007cff"
												@click="makePhoneCall(orderDetail.userPhone)"
											></uni-icons>
										</view>
									</view>
								</view>
								<view class="list-item">
									<view class="list-item_top">
										<view class="list-item_title">基本信息</view>
										<view class="list-item_top_right">
                                            <view v-if="orderDetail.isPause" class="tip" :style="{
                                                        'color': '#e69103',
                                                    }">
                                                已挂起
                                            </view>
                                            <template v-else>
                                                <view
                                                    class="tip"
                                                    v-if="
                                                        store.state.isManager &&
                                                        orderDetail.status == 4 &&
                                                        orderDetail.waitCheckOrder
                                                    "
                                                >
                                                    待审核
                                                </view>
                                                <view
                                                    class="tip"
                                                    v-if="
                                                        !orderDetail?.reservation &&
                                                        (store.state.isManager
                                                            ? orderDetail.status == 4
                                                            : orderDetail.status == 2)
                                                    "
                                                >
                                                    未预约
                                                </view>
                                                <view
                                                    class="tip"
                                                    v-if="
                                                        !orderDetail.signIn &&
                                                        (store.state.isManager
                                                            ? orderDetail.status == 4
                                                            : orderDetail.status == 2)
                                                    "
                                                >
                                                    未签到
                                                </view>
                                                <view
                                                    class="_tag"
                                                    v-if="
                                                        orderDetail.applyCancelOrderWaitCheck &&
                                                        store.state.isManager &&
                                                        orderDetail.status == 2
                                                            ? false
                                                            : true
                                                    "
                                                    :style="{
                                                        backgroundColor: status.filter(
                                                            (o) => orderDetail.status == o.status,
                                                        )[0].color,
                                                        '--item-color': status.filter(
                                                            (o) => orderDetail.status == o.status,
                                                        )[0].color,
                                                    }"
                                                >
                                                    {{
                                                        status.filter(
                                                            (o) => orderDetail.status == o.status,
                                                        )[0].name
                                                    }}
                                                </view>
                                            </template>
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">工单编号：</view>
										<view class="cont">
											<view
												style="
													display: flex;
													align-items: center;
													justify-content: space-between;
													flex: 1;
												"
											>
												<span style="font-weight: bold">
													{{ orderDetail.workNo }}
													<image
														@click="copy(orderDetail.workNo)"
														style="width: 30rpx; height: 30rpx"
														src="/static/copy.svg"
														mode=""
													></image>
												</span>
												<view
													class="level"
													:style="{color: orderDetail.workLevelColor}"
												>
													{{ orderDetail.workLevel }}
												</view>
											</view>
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">工单模块：</view>
										<view class="cont">
											{{ orderDetail.module }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">质保状态：</view>
										<view class="cont">
											{{ orderDetail.overinsured ? '过保' : '在保' }}
										</view>
									</view>
									<template v-if="orderDetail.status == 1">
										<template v-if="store.state.isManager">
											<view class="list-item_lable">
												<view class="list-item_lable_title">派单时间：</view>
												<view class="cont">
													{{ orderDetail.serviceDispatchNetworkTime }}
												</view>
											</view>
										</template>
										<template v-else>
											<view class="list-item_lable">
												<view class="list-item_lable_title">派工时间：</view>
												<view class="cont">
													{{ orderDetail.networkDispatchToEnginnerTime || '' }}
												</view>
											</view>
											<view class="list-item_lable">
												<view class="list-item_lable_title">接单人员：</view>
												<view class="cont">
													{{ DetailContentObj?.engineerName }}&nbsp;{{
														DetailContentObj?.engineerPhone
													}}
												</view>
											</view>
										</template>
									</template>
									<template
										v-if="
											store.state.isManager ? orderDetail.status == 3 : false
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派工时间：</view>
											<view class="cont">
												{{ orderDetail.networkDispatchToEnginnerTime || '' }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">接单人员：</view>
											<view class="cont">
												{{ DetailContentObj?.engineerName }}&nbsp;{{
													DetailContentObj?.engineerPhone
												}}
											</view>
										</view>
									</template>
									<template
										v-if="store.state.isManager && orderDetail.status == 2"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派单时间：</view>
											<view class="cont">
												{{ orderDetail.serviceDispatchNetworkTime }}
											</view>
										</view>
										<view class="list-item_lable">
											接单时间：
											<view class="cont">
												{{ orderDetail.networkReceiveTime }}
											</view>
										</view>
									</template>
									<template
										v-if="
											(store.state.isManager
												? orderDetail.status == 4
												: orderDetail.status == 2) && orderDetail.waitcheckorder
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请时间：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyTime }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请人：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyEmp }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请类型：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyType }}
											</view>
										</view>
									</template>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 4
												: orderDetail.status == 2
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派工时间：</view>
											<view class="cont">
												{{ orderDetail.networkDispatchToEnginnerTime }}
											</view>
										</view>
										<view
											class="list-item_lable"
											v-if="!orderDetail.engineer && store.state.isManager"
										>
											<view class="list-item_lable_title">工程师：</view>
											<view class="cont">
												{{ DetailContentObj?.engineerName }}&nbsp;{{
													DetailContentObj?.engineerPhone
												}}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">预约时间：</view>
											<view class="cont">
												{{ orderDetail?.reservationDate }}&nbsp;{{
													orderDetail?.reservationStartTime
												}}~{{ orderDetail?.reservationEndTime }}
											</view>
										</view>
									</template>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 5
												: orderDetail.status == 3
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请时间：</view>
											<view class="cont">
												{{ orderDetail.applyfinishTime }}
											</view>
										</view>
									</template>
									<view
										class="list-item_lable"
										v-if="
											store.state.isManager
												? orderDetail.status == 6
												: orderDetail.status == 4
										"
									>
										<view class="list-item_lable_title">完成时间：</view>
										<view class="cont">
											{{ orderDetail.orderEndTime }}
										</view>
									</view>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 7
												: orderDetail.status == 5
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">取消时间：</view>
											<view class="cont">
												{{ orderDetail.cancelOrderTime }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">取消人员：</view>
											<view class="cont">
												{{ orderDetail.cancelOrderEmp }}
											</view>
										</view>
									</template>
									<template v-if="orderDetail.status == 50">
										<view class="list-item_lable">
											<view class="list-item_lable_title">完成时间：</view>
											<view class="cont">
												{{ orderDetail.orderEndTime }}
											</view>
										</view>
									</template>
								</view>
								<view class="list-item">
									<view class="list-item_title">报单信息</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">报单时间：</view>
										<view class="cont">
											{{ orderDetail.createTime }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">期望上门时间：</view>
										<view class="cont">
											{{ orderDetail.expectedDate }}&nbsp;{{
												orderDetail.expectedStartTime
											}}~{{ orderDetail.expectedEndTime }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">描述：</view>
										<view class="cont">
											{{ DetailContentObj?.content }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">工单图片：</view>
										<view class="cont">
											<template
												v-for="(img, index) in DetailContentObj?.images"
											>
												<view
													class="pdf_sty"
													v-if="img.includes('pdf')"
													@click="lookPDF(img)"
												>
													PDF
												</view>
												<image
													v-else
													:src="img"
													mode="aspectFill"
													class="cont_img"
													@click="lookImg(DetailContentObj?.images, index)"
												></image>
											</template>
										</view>
									</view>
								</view>
                                <view class="list-item_info" v-if="orderDetail.status === 1 && orderDetail.isReturn === 1">
                                    <uni-forms ref="formRef" label-width="150" :model="expressInfo">
                                        <uni-forms-item class="formSelect" label="快递公司">
                                            <uni-data-select
                                                placeholder="请选择快递公司"
                                                :localdata="expressOptions"
                                                v-model="expressInfo.expressCompany"
                                            ></uni-data-select>
                                         </uni-forms-item>
                                       <uni-forms-item label="快递单号">
                                            <uni-easyinput
                                                placeholderStyle="font-size: 24rpx;"
                                                placeholder="请输入快递单号"
                                                v-model.trim="expressInfo.expressNbr"
                                            />
                                        </uni-forms-item>
                                        
                                    </uni-forms>
                                </view>
								<view
									class="list-item"
									v-if="
										store.state.isManager
											? orderDetail.status == 5 || orderDetail.status == 6
											: orderDetail.status == 3 || orderDetail.status == 4
									"
								>
									<view class="list-item_title">结单信息</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">申请人：</view>
										<view class="cont">
											{{ orderDetail?.finishOrderApplyEmp }}
										</view>
									</view>
									<view
										class="list-item_finish_order"
										v-for="(
											Data, indexData
										) in orderDetail.finishOrderTemplates"
										:key="indexData"
									>
										<view v-for="(item, index) in Data.fieldVals" :key="index">
											<view class="list-item_lable">
												<view class="list-item_lable_title">
													{{ item.name }}：
												</view>
												<view
													class="cont"
													v-if="
														item.type == 1 ||
														item.type == 2 ||
														item.type == 3 ||
														item.type == 4
													"
												>
													{{ item.optVos.map((o) => o.optValue).join('、') }}
												</view>
												<view class="cont" v-if="item.type == 5">
													<image
														:src="img"
														mode="aspectFill"
														class="cont_img"
														v-for="(img, index) in item.optVos.map(
															(o) => o.optValue,
														)"
														:key="index"
														@click="
															lookImg(
																item.optVos.map((o) => o.optValue),
																index,
															)
														"
													></image>
												</view>
												<view class="cont" v-if="item.type == 6">
													<view
														class="pdf_sty"
														v-for="(url, index) in item.optVos.map(
															(o) => o.optValue,
														)"
														:key="index"
														@click="lookPDF(url)"
													>
														PDF
													</view>
												</view>
												<view class="cont" v-if="item.type == 7">
													<video
														:src="url"
														mode="aspectFill"
														class="cont_img"
														v-for="(url, index) in item.optVos.map(
															(o) => o.optValue,
														)"
														@click="videoUrlShow(url)"
														:key="index"
														:controls="false"
														:enable-progress-gesture="false"
														:show-center-play-btn="false"
													></video>
												</view>
												<!-- 评分8 -->
												<view class="cont" v-if="item.type === 8">
													<uni-rate
														:readonly="true"
														:value="
															Number(
																item.optVos.map((o) => o.optValue).join(),
															) / 2
														"
														margin="10"
													/>
												</view>
											</view>
										</view>
									</view>
									<view class="list-item_finish_order">
										<view>
											<view class="list-item_lable">
												<view class="list-item_lable_title">
													服务签收单图片：
												</view>
												<view class="cont">
													<image
														:src="img"
														mode="aspectFill"
														class="cont_img"
														v-for="(img, index) in orderDetail.signImageList"
														:key="index"
														@click="lookImg(orderDetail.signImageList, index)"
													></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view
									class="list-item"
									v-if="store.state.isManager && orderDetail.status == 1"
								>
									<view class="list-item_title">派单备注</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											{{ DetailContentObj?.dispatchRemark }}
										</view>
									</view>
								</view>
								<view
									class="list-item"
									v-if="
										store.state.isManager &&
										orderDetail.status == 4 &&
										orderDetail.waitCheckOrder
									"
								>
									<view class="list-item_title">申请备注</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											{{ orderDetail?.applyRemark }}
										</view>
									</view>
								</view>
								<view
									class="list-item"
									v-if="
										store.state.isManager
											? orderDetail.status == 7
											: orderDetail.status == 5
									"
								>
									<view class="list-item_title">取消原因</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											{{ DetailContentObj?.cancelOrderRemark }}
										</view>
									</view>
								</view>
                                <template v-if="!orderDetail.isPause">
                                    <view
                                    	class="share_box"
                                    	v-if="
                                    		(store.state.isManager
                                    			? orderDetail.status == 4
                                    			: orderDetail.status == 2) && moreIcons.length > 0
                                    	"
                                    >
                                    	<view class="share_content">
                                    		<view
                                    			class="share_content_item"
                                    			v-for="item in moreIcons"
                                    			:key="item.status"
                                    		>
                                    			<image
                                    				@click="onShare(item)"
                                    				:src="`../../../static/network/order/more/icon${item.status}.svg`"
                                    				mode="aspectFit"
                                    				class="icon_img"
                                    			></image>
                                    			<view class="icon_name">
                                    				{{ item.name }}
                                    			</view>
                                    		</view>
                                    	</view>
                                    </view>
                                </template>
                            </view>
						</scroll-view>
                        <template v-if="!orderDetail.isPause">
                            <view class="footer_order" v-if="orderDetail.status == 1">
                                <view class="footer_order_left" @click="rejectiveShow">
                                    <p class="red_tip">拒绝接单</p>
                                </view>
                                <view class="footer_order_right" @click="rejectiveYes">
                                    <view class="btn">确认接单</view>
                                </view>
                            </view>
                            <view
                                class="footer_order"
                                v-if="
                                    store.state.isManager &&
                                    orderDetail.status == 2 &&
                                    !orderDetail.applyCancelOrderWaitCheck
                                "
                            >
                                <view
                                    class="footer_order_right"
                                    v-if="store.state.isManager && orderDetail.status == 2"
                                    @click="AssignmentEngineer"
                                >
                                    <view class="btn">分派工程师</view>
                                </view>
                                <view class="footer_order_left_" @click="changeType">
                                    更多
                                    <uni-icons type="down" color="#007cff" size="12"></uni-icons>
                                </view>
                            </view>
                            <view
                                class="footer_order"
                                v-else-if="
                                    store.state.isManager && orderDetail.applyCancelOrderWaitCheck
                                "
                            >
                                <view class="footer_order_right" style="backgroundcolor: #ccc">
                                    <view class="btn">已申请取消工单</view>
                                </view>
                            </view>
                            <view
                                class="footer_order"
                                v-if="
                                    store.state.isManager
                                        ? orderDetail.status == 4
                                        : orderDetail.status == 2
                                "
                            >
                                <view
                                    class="footer_order_right"
                                    v-if="
                                        orderDetail.suspendOrder &&
                                        (store.state.isManager ? orderDetail.engineer : true)
                                    "
                                    @click="networkEmpRestartSuspend"
                                >
                                    <view class="btn">解除挂起</view>
                                </view>
                                <template v-else>
                                    <view
                                        class="footer_order_right"
                                        v-if="orderDetail.waitCheckOrder && store.state.isManager"
                                        @click="checkOrder"
                                    >
                                        <view class="btn">审核</view>
                                    </view>
                                    <view
                                        class="footer_order_right"
                                        v-else-if="
                                            orderDetail?.applyChangeNetworkWaitCheckOrder &&
                                            store.state.isManager
                                        "
                                        style="backgroundcolor: #ccc"
                                    >
                                        <view class="btn">已申请改派服务商</view>
                                    </view>
                                    <view
                                        class="footer_order_right"
                                        v-else-if="
                                            !store.state.isManager &&
                                            orderDetail?.engineerApplyChangeOrder
                                        "
                                        style="backgroundcolor: #ccc"
                                    >
                                        <view class="btn">已申请转单</view>
                                    </view>
                                    <view
                                        class="footer_order_right"
                                        v-else-if="orderDetail?.hasApplyFinishorder"
                                        style="backgroundcolor: #ccc"
                                    >
                                        <view class="btn">已申请结单</view>
                                    </view>
                                    <view class="footer_order_right_" v-else></view>
                                    <!-- <view class="footer_order_right" v-else @click="shareShow">
                                        <view class="btn">更多功能</view>
                                    </view> -->
                                </template>
                            </view>
                        </template>
                    </view>
				</swiper-item>
				<!-- 工单进展 -->
				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							class="scroll-view_list"
							@scrolltolower="scrolltolower"
						>
							<view class="log_list">
								<view
									class="log_item"
									v-for="(item, index) in logObjList.rows"
									:key="index"
								>
									<uni-icons
										type="smallcircle"
										class="icon_item"
										size="20"
										:color="index == 0 ? '#007cff' : '#EAECEE'"
									></uni-icons>
									<view class="block_item">
										<view class="title_span">
											<p
												class="content_time"
												:style="{color: index == 0 ? '#000' : '#999'}"
											>
												{{ item.createTime }}
											</p>
											<p
												class="title"
												:style="{color: index == 0 ? '#007cff' : '#999'}"
											>
												{{
													'【' +
													item.type +
													'】' +
													item.createEmp +
													'&nbsp;' +
													item.name
												}}{{ item.event }}
											</p>
											<view
												class="content_text"
												:style="{color: index == 0 ? '#000' : '#999'}"
											>
												{{ item.content }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<!-- 商品信息 -->
				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							v-if="goodsDetail"
						>
							<view class="goods_info">
								<view
									v-for="(item, index) in goodsDetail"
									:key="index"
									class="goods_info_item_li"
								>
									<view class="goods_info_conent">
										<view class="left_img">
											<image
												v-if="item.goodsImage"
												@click="lookImg([item.goodsImage], 0)"
												class="img"
												lazy-load
												:src="item.goodsImage"
												mode="aspectFill"
											></image>
											<uni-icons
												color="#aae"
												size="48"
												v-else
												type="image"
											></uni-icons>
										</view>
										<view class="right_text">
											<view class="brands">
												{{ '【' + item.goodsBrand + '】' }}
												{{ item.goodsName }}
											</view>
											<view class="pt">
												<span class="tip">规格：</span>
												<view class="lis">
													{{ item.goodsSpecName }}
												</view>
											</view>
											<view class="pt">
												<span class="tip">型号：</span>
												<view class="lis">
													{{ item.goodsModel }}
												</view>
											</view>
											<view class="pt">
												<span class="tip">分类：</span>
												<view class="lis">
													{{ item.goodsType }}
												</view>
											</view>
											<view class="pt">
												<span class="tip">一物一码：</span>
												<view class="lis_code">
													{{ item.code }}
												</view>
												<view
													class="num_b"
													@click="showGoodsCode(item)"
													v-if="item.qty > 1"
												>
													<view class="num_b_qty">
														{{ item.qty > 99 ? '99+' : item.qty }}
													</view>
													<uni-icons
														type="right"
														color="#999"
														size="16"
													></uni-icons>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>

				<!-- 费用信息 -->
				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
						>
							<view class="list-item_content" v-if="getFeeInfo">
								<view class="list-item_info_fee">
									<view class="lable">
										<uni-section title="工单结算价：" type="line"></uni-section>
										<view class="cont">
											￥{{ getFeeInfo.networkDeductionPrice.toFixed(2) }}
										</view>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable">
										<uni-section title="服务总费用：" type="line"></uni-section>
										<view class="cont">
											￥{{ getServiceFeeSummary.toFixed(2) }}
										</view>
										<span
											v-if="getFeeInfo.orderFees.length > 1"
											@click="isFeeShow = !isFeeShow"
											:class="isFeeShow ? 'down_up_' : 'down_up'"
										></span>
									</view>
									<view
										style="margin-top: 24rpx"
										v-for="(item, index) in getFeeInfo.orderFees"
										v-if="getFeeInfo.orderFees.length == 1 ? true : !isFeeShow"
										:key="index"
									>
										<view class="">费用单号：{{ item.code }}</view>
										<table cellspacing="6">
											<!-- 表头行 -->
											<thead>
												<tr>
													<th width="30%" align="center">服务名称</th>
													<th width="30%" align="center">服务金额</th>
													<th width="20%" align="center">状态</th>
													<th width="30%" align="center">审核时间</th>
												</tr>
											</thead>
											<tbody>
												<!-- 表格数据行 -->
												<tr
													v-for="(item2, index2) in item.detailFeeInfoVos"
													:key="index2"
												>
													<td width="30%" class="td">{{ item2.name }}</td>
													<td width="30%" class="td">
														￥{{ item2.price.toFixed(2) }}
													</td>
													<td width="20%" class="td">
														{{
															item2.status == 1
																? '待审核'
																: item2.status == 2
																? '已通过'
																: '已驳回'
														}}
													</td>
													<td width="30%" class="td">{{ item2.dateTime }}</td>
												</tr>
											</tbody>
										</table>
										<p
											style="width: 100%; height: 1rpx; background-color: #ccc"
										/>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable">
										<view class="title">
											<uni-section
												title="配件总费用："
												type="line"
											></uni-section>
										</view>
										<view class="cont">
											￥{{ getSparePartSummary.toFixed(2) }}
										</view>
										<span
											v-if="getFeeInfo.spareFees.length > 1"
											@click="isSpareShow = !isSpareShow"
											:class="isSpareShow ? 'down_up_' : 'down_up'"
										></span>
									</view>
									<view
										style="margin-top: 24rpx"
										v-if="
											getFeeInfo.spareFees.length == 1 ? true : !isSpareShow
										"
										v-for="(item, index) in getFeeInfo.spareFees"
										:key="index"
									>
										<view class="">配件单号：{{ item.code }}</view>
										<table cellspacing="6">
											<!-- 表头行 -->
											<thead>
												<tr>
													<th width="30%" align="center">配件名称</th>
													<th width="30%" align="center">配件金额</th>
													<th width="18%" align="center">状态</th>
													<th width="30%" align="center">审核时间</th>
												</tr>
											</thead>
											<!-- 表格数据行 -->
											<tbody>
												<tr
													v-for="(item2, index2) in item.detailFeeInfoVos"
													:key="index2"
												>
													<td width="30%" class="td">{{ item2.name }}</td>
													<td width="30%" class="td">
														￥{{ item2.price.toFixed(2) }}
													</td>
													<td width="18%" class="td">
														{{
															item2.status == 1
																? '待审核'
																: item2.status == 2
																? '已通过'
																: '已驳回'
														}}
													</td>
													<td width="30%" class="td">{{ item2.dateTime }}</td>
												</tr>
											</tbody>
										</table>
										<p
											style="width: 100%; height: 1rpx; background-color: #ccc"
										/>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable">
										<uni-section title="合计金额：" type="line"></uni-section>
										<view class="cont">
											￥{{
												(
													getTotalSummary - getFeeInfo.networkDeductionPrice
												).toFixed(2)
											}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask_more" v-if="typeBtn" @click="onClickMore">
			<view class="btn_more">
				<p
					v-for="(item, index) in typeList"
					@click="onClickMore(index)"
					class="text_sty"
					:key="index"
				>
					{{ item.text }}
				</p>
			</view>
		</view>
		<!-- 商品一物一码列表弹窗 -->
		<uni-popup ref="popupGoodsCode" safeArea type="bottom">
			<view class="popup_list" v-if="goodsList">
				<view class="text_top_popup">
					<span>当前商品一物一码列表（{{ goodsList?.qty }}）</span>
					<uni-icons
						color="#aaa"
						@click="popupGoodsCode.close()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="height_list">
					<view class="left_img">
						<image
							v-if="goodsList.goodsImage"
							@click="lookImg([goodsList.goodsImage])"
							class="img"
							lazy-load
							:src="goodsList.goodsImage"
							mode="aspectFill"
						></image>
						<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
					</view>
					<view class="right_text">
						<view class="brands">
							{{ '【' + goodsList.goodsBrand + '】' }}
							{{ goodsList.goodsName }}
						</view>
						<view class="ms">
							<p class="tip">型号：</p>
							<p>{{ goodsList.goodsModel }}</p>
						</view>
						<view class="ms">
							<p class="tip">规格：</p>
							<p>{{ goodsList.goodsSpecName }}</p>
						</view>
						<view class="ms">
							<p class="tip">分类：</p>
							<p>{{ goodsList.goodsType }}</p>
						</view>
					</view>
				</view>
				<view class="list_ovh">
					<uni-list-item
						v-for="(item, index) in goodsList?.codes"
						clickable
						:key="index"
					>
						<template v-slot:body>
							<view class="way_name" @click="copy(item)">
								<span>{{ index + 1 }}.&nbsp;&nbsp;{{ item }}</span>
								<image class="img" src="/static/copy.svg" mode=""></image>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
		<!-- 取消工单 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="取消工单"
				value=""
				placeholder="请输入取消理由"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 拒绝接单 -->
		<uni-popup ref="inputDialog_rej" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="拒绝接单"
				value=""
				@confirm="dialogInputConfirmRej(remark)"
			>
				<view class="input_popup">
					<uni-easyinput
						v-model="remark"
						placeholder="请输入拒绝理由"
					></uni-easyinput>
					<view class="red_tip_title">拒绝接单，将无法查询此单记录！</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 更多功能 -->
		<uni-popup ref="shareRef" type="share" safeArea>
			<view class="share_box">
				<view class="share_content">
					<view
						class="share_content_item"
						v-for="item in moreIcons"
						:key="item.status"
					>
						<image
							@click="onShare(item)"
							:src="`../../../static/network/order/more/icon${item.status}.svg`"
							mode="aspectFit"
							class="icon_img"
						></image>
						<view class="icon_name">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="cancel_btn" @click="shareRef.close()">取消</view>
			</view>
		</uni-popup>

		<!-- 选择时间段 -->
		<TimePopup
			@set-popup="showpopupValue($event)"
			:setTimeObj="setTimeObj"
			:showpopup="showpopup"
			:workId="workId"
			@value-change="handleTimeOfAppointmentRangeSelect($event)"
		/>

		<!-- 选择预约时间段 -->
		<TimePopup
			@set-popup="showpopupValueCall($event)"
			:setTimeObj="setTimeObjCall"
			:showpopup="showpopupCall"
			:workId="workId"
			@value-change="valueChangeCall($event)"
		/>
		<uni-popup ref="showTimeRef" type="bottom" :mask-click="false">
			<view class="popup-time_show">
				<view class="lable_top">
					<uni-icons
						v-if="timeOfAppointmentModelValue.dateVal"
						class="icon"
						color="#aaa"
						@click="closePopup"
						size="22"
						type="closeempty"
					></uni-icons>
					<view>预约时间</view>
					<uni-icons
						v-if="!timeOfAppointmentModelValue.dateVal"
						class="icon"
						color="#aaa"
						@click="closePopup"
						size="22"
						type="closeempty"
					></uni-icons>
					<view
						class="lable_btn"
						@click="onTimeOfAppointmentConfirmClick"
						v-if="
							timeOfAppointmentModelValue.dateVal &&
							timeOfAppointmentModelValue.dateVal.text &&
							timeOfAppointmentModelValue.dateVal.date
						"
					>
						确定
					</view>
				</view>
				<view class="bodyer_time">
					<view
						class="bodyer_time_left"
						v-if="
							timeOfAppointmentModelValue.dateVal &&
							!timeOfAppointmentModelValue.dateVal.date
						"
					>
						<span class="bodyer_time_left_tip">预约时间：</span>
						<span v-if="orderDetail?.reservationDate">
							{{ orderDetail?.reservationDate }}&nbsp;{{
								orderDetail.reservationStartTime
							}}~{{ orderDetail.reservationEndTime }}
						</span>
					</view>
					<view class="bodyer_time_left" v-else>
						<span class="bodyer_time_left_tip">预约时间：</span>
						{{ timeOfAppointmentModelValue.dateVal.date }}&nbsp;{{
							timeOfAppointmentModelValue.time
						}}
					</view>
					<view class="bodyer_time_right" @click="showpopupSelet">
						请选择
						<uni-icons
							class="icon"
							color="#aaa"
							size="20"
							type="right"
						></uni-icons>
					</view>
				</view>
				<view class="bodyer_time">
					<view class="bodyer_time_left">
						<span class="bodyer_time_left_tip">是否需要再次上门：</span>
					</view>
					<view class="bodyer_time_right">
						<switch
							:checked="timeOfAppointmentModelValue.isAgainTimeOfAppointment"
							color="#007CFF"
							style="transform: scale(0.7)"
							@change="handleIsAgainTimeOfAppointment"
						/>
						{{
							timeOfAppointmentModelValue.isAgainTimeOfAppointment
								? '需要'
								: '不需要'
						}}
					</view>
				</view>
				<template
					v-if="
						timeOfAppointmentModelValue &&
						timeOfAppointmentModelValue.isAgainTimeOfAppointment
					"
				>
					<view class="bodyer_time">
						<view class="bodyer_time_left">
							<span class="bodyer_time_left_tip">上次上门结束时间：</span>
							<span>
								{{ timeOfAppointmentModelValue.lastEndTime }}
							</span>
						</view>
						<view class="bodyer_time_right">
							<uni-datetime-picker
								v-model="timeOfAppointmentModelValue.lastEndTime"
								:start="getWeekStartEndTimestamps().start"
								:end="getWeekStartEndTimestamps().end"
								:hide-second="true"
							>
								请选择
								<uni-icons
									class="icon"
									color="#aaa"
									size="20"
									type="right"
								></uni-icons>
							</uni-datetime-picker>
						</view>
					</view>
					<view class="remark" v-if="orderDetail.reservation">
						<view class="label">再次上门原因：</view>
						<uni-easyinput
							placeholder="请输入再次上门原因"
							:trim="true"
							type="textarea"
							v-model="timeOfAppointmentModelValue.remark"
							:maxlength="200"
						></uni-easyinput>
					</view>
				</template>
			</view>
		</uni-popup>
		<!-- 改服务商 -->
		<uni-popup ref="changeNetworkDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="申请改派服务商"
				value=""
				placeholder="请输入备注"
				@confirm="changeNetworkConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 改工程师 -->
		<uni-popup ref="changeNetworkEmpDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="申请改工程师"
				value=""
				placeholder="请输入备注"
				@confirm="changeNetworkEmpConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 填写拨打弹窗 -->
		<uni-popup ref="callPhoneRef" :before-close="true">
			<view class="call_phone_popup">
				<view class="lable_top">
					<view>拨打结果</view>
					<uni-icons
						class="icon"
						color="#aaa"
						@click="closeCallPhonePopup()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="call_content">
					<p class="table">拨打结果：</p>
					<uni-data-checkbox
						v-model="callPhoneLogVo.callPhoneResult"
						:localdata="callTypeList"
					/>
					<view class="bodyer_time" v-if="callPhoneLogVo.callPhoneResult != 3">
						<view class="bodyer_time_left">
							<span class="bodyer_time_left_tip">
								{{
									callPhoneLogVo.callPhoneResult == 1
										? '预约时间：'
										: '下次拨打时间：'
								}}
							</span>
							{{ timeObjCall?.dateVal.date }}&nbsp;{{ timeObjCall?.time }}
						</view>
						<view class="bodyer_time_right" @click="showpopupSeletCall">
							请选择
							<uni-icons
								class="icon"
								color="#aaa"
								size="20"
								type="right"
							></uni-icons>
						</view>
					</view>
					<p class="table" v-if="callPhoneLogVo.callPhoneResult == 3">备注：</p>
					<view class="text_input" v-if="callPhoneLogVo.callPhoneResult == 3">
						<uni-easyinput
							type="textarea"
							maxlength="20"
							:inputBorder="false"
							placeholderStyle="font-size:28rpx;background:rgb(243, 244, 248)"
							v-model="callPhoneLogVo.remark"
							placeholder="填写备注"
						/>
						<view class="coun">{{ callPhoneLogVo.remark.length }}/20</view>
					</view>
					<view class="call_btn" @click="saveCallPhone">提交</view>
				</view>
			</view>
		</uni-popup>
        
        <!-- 文本提示 -->
        <uni-popup ref="textRef" :before-close="true">
        	<view class="textPopup">
                <view class="lable_top">
                	<view>智能锁工程师安装服务流程规范：</view>
                	<uni-icons
                		class="icon"
                		color="#aaa"
                		@click="closeTextPopup()"
                		size="22"
                		type="closeempty"
                	></uni-icons>
                </view>
        		<view class="textContent">
        		    <!-- <view class="title">
        		        
        		    </view> -->
        		    <view class="item">
        		        1、客服通过对接群及系统派单，工单派发后两小时内联系客户预约上门时间，务必将预约结果反馈客服。
        		    </view>
        		    <view class="item">
        		        2、上门前1小时向客户确认家中是否有人，防止空跑。
        		    </view>
                    <view class="item">
                        3、安装前务必检测安装环境，确保现场符合安装条件。
                    </view>
        		    <view class="item">
        		        4、对智能锁进行通电检测，清点配件数量。
        		    </view>
        		    <view class="item">
        		        5、如有风险告知书必须先签订风险告知书并立即拍照留存，如客户拒绝签署，立即反馈我方客服，现场停止安装动作！
        		    </view>
        		    <view class="item">
        		        6、有的前面板必须安装两颗定位柱，锁芯扁轴超过门板2.8-3cm，方钢长度超过锁体但不能超过门板。
        		    </view>
        		    <view class="item">
        		        7、安装完成需给客户下载APP进行联网或者激活
        		    </view>
        		    <view class="item">
        		        8、安装完成务必向客户签署服务监督卡并打钩对应选项。
        		    </view>
        		    <view class="item">
        		        9、拍摄六张照片+两个视频(CTEI码/SN码、前面板、后面板、锁体正面、门框片、风险告知书和服务监督卡)+(指静脉录入视频、安装后检测视频)。
        		    </view>
        		    <view class="item">
        		        注意：禁止收取客户任何费用！有任何需要及时反馈对接群，紧急问题可联系我方人员：19846610417
        		    </view>
        		    
        		</view>
        	</view>
        </uni-popup>
        
		<uni-popup
			ref="popupvideoRef"
			background-color="#fff"
			@change="urlClickShow"
		>
			<video
				:src="videoUrl"
				:enable-progress-gesture="false"
				:show-center-play-btn="false"
			></video>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch, computed} from 'vue';
	import {onUnload, onShow, onLoad, onHide} from '@dcloudio/uni-app';
	import apiOrder from '@/util/network_api/apiOrder.js';
	import store from '@/store_network/index.js';
	import _ from 'lodash';
	import apiAccount from '@/util/network_api/account.js';
	import TimePopup from '@/components/u-network/TimePopup.vue';
	import moment from 'moment';

	// 获取服务总费用
	const getServiceFeeSummary = computed(() => {
		let result = 0;
		getFeeInfo.value.orderFees.forEach((item) => {
			item.detailFeeInfoVos.forEach((fee) => {
				result += fee.status === 2 ? Number(fee.price) : 0;
			});
		});
		return result;
	});

	// 获取配件总费用
	const getSparePartSummary = computed(() => {
		let result = 0;
		getFeeInfo.value.spareFees.forEach((item) => {
			item.detailFeeInfoVos.forEach((fee) => {
				result += fee.status === 2 ? Number(fee.price) : 0;
			});
		});
		return result;
	});

	// 获取合计金额
	const getTotalSummary = computed(() => {
		let result = getFeeInfo.value.networkModulePrice;
		result += getServiceFeeSummary.value;
		result += getSparePartSummary.value;
		return result;
	});

	const tabsList = ref([
		{
			status: 1,
			name: '工单信息',
		},
		{
			status: 2,
			name: '工单进展',
		},
		{
			status: 3,
			name: '商品信息',
		},
		{
			status: 4,
			name: '费用信息',
		},
	]);

	function getWeekStartEndTimestamps() {
		// 获取本周一00:00:00的时间戳（ISO周起始为周一）
		const startOfWeek = moment().startOf('isoWeek').startOf('day');
		// 获取本周日23:59:59的时间戳（ISO周结束为周日）
		const endOfWeek = moment().endOf('isoWeek').endOf('day');

		return {
			start: startOfWeek.valueOf(), // 返回周一0点的毫秒时间戳
			end: endOfWeek.valueOf(), // 返回周日24点的毫秒时间戳
		};
	}

	//工程师
	const statusList2 = ref([
		{status: 1, name: '待接单', color: '#f56c6c'},
		{status: 2, name: '服务中', color: '#00c0c0'},
		{status: 3, name: '待结单', color: '#e69103'},
		{status: 4, name: '已完成', color: ' #007cff'},
		{status: 5, name: '已取消', color: '#cccccc'},
		{status: 50, name: '待结算', color: '#e69103'},
	]);
	const statusList = ref([
		{status: 1, name: '待接单', color: '#f56c6c'},
		{name: '待派工', status: 2, color: '#e69103'},
		{name: '待工程师接单', status: 3, color: '#e69103'},
		{name: '服务中', status: 4, color: ' #00c0c0'},
		{name: '待结单', status: 5, color: '#e69103'},
		{name: '已完成', status: 6, color: ' #007cff'},
		{name: '已取消', status: 7, color: '#ccc'},
		{name: '待结算', status: 50, color: '#e69103'},
	]);
	const moreIcons = ref([]);
	const moreIconsList = ref([
		{name: '预约时间', status: 1},
		{name: '签到', status: 2},
		{name: '申请费用', status: 3},
		{name: '申请备件', status: 4},
		{name: '申请结单', status: 5},
		// { name: '客户结算', status: 6 },
		// { name: '留言', status: 7 },
		{name: '申请转单', status: 8},
		{name: '申请挂起', status: 9},
		{name: '改服务商', status: 10},
	]);
	const callTypeList = ref([
		{text: '拨打成功', value: 1},
		{text: '无人接听', value: 2},
		{text: '其他原因', value: 3},
	]);
	const orderDetail = ref(null); //工单详情
	const DetailContentObj = ref(null);
	const goodsDetail = ref(null); //商品详情
	const goodsList = ref();
	const popupGoodsCode = ref(); //商品编码展示
	const currentTab = ref(0); //当前标题index
	const showTimeRef = ref();
	const showpopup = ref(false); //改约日期弹窗
	const shareRef = ref(); //更多弹窗
	const changeNetworkEmpDialog = ref(); //改工程师
	const remark = ref('');
	const status = ref([]);
	const isCallPhone = ref(false); //记录是否拨打
	const callPhoneRef = ref(); //填写拨打记录弹窗
	const callPhoneLogVo = ref({
		callPhoneResult: 1, //	拨打结果：1-拨打成功，2-无人接听，3-其他原因
		remark: '',
		date: '',
		nextCallPhoneDate: '', //下次拨打电话时间
		reservationEndTime: '',
		reservationStartTime: '',
	});
	const typeList = ref([
		{text: '申请转服务商', value: 1},
		{text: '取消工单', value: 2},
	]);
	const typeBtn = ref(false);
	const changeType = () => {
		typeBtn.value = true;
	};
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = '';
	};
	const onClickMore = (index) => {
		typeBtn.value = false;
		if (index === 0) {
			changeNetworkDialog.value.open();
		} else if (index === 1) {
			cancelShow();
		}
	};
	const isFeeShow = ref(true); //费用信息显示收起
	const isSpareShow = ref(true); //配件信息显示收起
	// Tab切换内容
	async function swichMenu(index) {
		uni.showLoading({
			title: '加载中',
		});
		currentTab.value = index;
		switch (index) {
			case 0:
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				break;
			case 1:
				dataVo.value.page = 1;
				getNetworkOrderLastLogObj();
				break;
			case 2:
				getNetworkOrderDetailGoodsObj(workId.value);
				uni.hideLoading();

				break;
			case 3:
				apiOrder.getOrderFeeInfo(workId.value).then((res) => {
					if (res.code == 20000) {
						getFeeInfo.value = res.data.rows;
					}
					uni.hideLoading();
				});
				break;
		}
	}
	const workId = ref(null); //工单Id
	// 费用详情
	const getFeeInfo = ref(null);
	// 工单进展
	const logObjList = ref({rows: [], total: 0});
	let dataVo = ref({
		limit: 0,
		page: 1,
	});
	const getNetworkOrderLastLogObj = async () => {
		uni.showLoading({
			title: '加载中...',
		});
		await apiOrder
			.getNetworkOrderLog(dataVo.value, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					if (dataVo.value.page == 1) {
						logObjList.value = res.data;
					} else {
						logObjList.value.rows = [
							...logObjList.value.rows,
							...res.data.rows,
						];
						logObjList.value.total = res.data.total;
					}
				}
			});
		uni.hideLoading();
	};
	const scrolltolower = () => {
		if (
			currentTab.value == 1 &&
			logObjList.value.total > logObjList.value.rows.length
		) {
			dataVo.value.page += 1;
			getNetworkOrderLastLogObj();
		}
	};
	// *******拨打预约时间******
	const showpopupCall = ref(false);
	const timeObjCall = ref();
	const setTimeObjCall = ref({
		reservationTimeType: 3, //1-不启用，2-24小时，3-预约时间范围”
		reservationStartTime: '05:00',
		reservationEndTime: '24:00',
	});
	// 设置弹窗
	const showpopupValueCall = (val) => {
		showpopupCall.value = val;
		callPhoneRef.value.open('bottom');
	};
	const valueChangeCall = (val) => {
		timeObjCall.value = null;
		timeObjCall.value = val;
		if (callPhoneLogVo.value.callPhoneResult == 1) {
			callPhoneLogVo.value.date = timeObjCall.value.dateVal.date;
			callPhoneLogVo.value.nextCallPhoneDate = '';
		} else if (callPhoneLogVo.value.callPhoneResult == 2) {
			callPhoneLogVo.value.nextCallPhoneDate = timeObjCall.value.dateVal.date;
			callPhoneLogVo.value.date = '';
		}
		callPhoneLogVo.value.reservationStartTime =
			timeObjCall.value.time.split('~')[0];
		callPhoneLogVo.value.reservationEndTime =
			timeObjCall.value.time.split('~')[1];
	};
	const showpopupSeletCall = () => {
		showpopupCall.value = true;
		callPhoneRef.value.close();
	};
	onLoad(async (e) => {
		if (!e.workId) return;
		workId.value = e.workId;
		uni.showLoading({
			title: '加载中',
		});
		// 获取用户信息
		await store.dispatch('getUpdataUser');
		if (store.state.isManager) {
			status.value = statusList.value;
		} else {
			status.value = statusList2.value;
		}

		await Promise.all([
			getNeworkOrderDetailObj(e.workId),
			getNetworkOrderDetailContentObj(e.workId),
		]).then((res) => {
			if (
				store.state.isManager
					? orderDetail.value.status == 4
					: orderDetail.value.status == 2
			) {
				shareShow();
			}
			uni.hideLoading();
		});
	});
	onUnload(() => {
		uni.hideLoading();
	});
	// 查看视频
	const popupvideoRef = ref();
	const videoUrl = ref('');
	const videoUrlShow = (url) => {
		videoUrl.value = url;
		popupvideoRef.value.open();
	};
	// 处理隐藏手机号
	function setPhone(str) {
		let tem = str.slice(0, 3) + '****' + str.slice(str.length - 4);
		return tem;
	}
    // 文本显示
    const textRef = ref();
    const handelTextShow = () => {
        textRef.value.open();
    };
    const closeTextPopup = () => {
        textRef.value.close();
    }
	//关闭填写拨打记录弹窗
	const closeCallPhonePopup = () => {
		callPhoneRef.value.close();
	};
	// 保存拨打记录
	const saveCallPhone = () => {
		if (callPhoneLogVo.value.callPhoneResult == 3) {
			callPhoneLogVo.value.reservationStartTime = '';
			callPhoneLogVo.value.reservationEndTime = '';
			callPhoneLogVo.value.date = '';
			callPhoneLogVo.value.nextCallPhoneDate = '';
		} else {
			if (
				!callPhoneLogVo.value.date &&
				callPhoneLogVo.value.callPhoneResult == 1
			) {
				uni.showToast({
					title: '请先选择预约时间',
					icon: 'none',
				});
				return;
			}
			callPhoneLogVo.value.remark = '';
		}
		apiOrder
			.saveCallPhoneLog(callPhoneLogVo.value, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
					isCallPhone.value = false;
					callPhoneLogVo.value.remark = '';
					callPhoneLogVo.value.reservationStartTime = '';
					callPhoneLogVo.value.reservationEndTime = '';
					callPhoneLogVo.value.date = '';
					callPhoneLogVo.value.nextCallPhoneDate = '';
					timeObjCall.value = null;
					callPhoneRef.value.close();
					swichMenu(0);
                    handelTextShow()
                    
				}
			});
	};
	const lookFee = ref(true);
	onShow(async (e) => {
		// 派工返回刷新页面
		if (uni.getStorageSync('order_detail') == 1) {
			swichMenu(0);
			uni.removeStorageSync('order_detail');
		}
		// 费用查看权限
		apiAccount.getSelectFeeRoot().then((res) => {
			if (res.code == 20000) {
				lookFee.value = res.data.row;
			}
		});
	});
	// 调起拨打电话的功能
	const makePhoneCall = async (phoneNumber) => {
		if (
			isCallPhone.value &&
			orderDetail.value.callPhoneType == 1 &&
			!orderDetail.value.writeCallPhoneResult
		) {
			uni.showToast({
				title: '请先填写拨打结果',
				icon: 'none',
			});
			return;
		}
		// #ifndef H5
		plus.android.requestPermissions(
			['android.permission.CALL_PHONE'],
			(res) => {
				if (res.granted.length > 0) {
					callNumber(phoneNumber);
				} else {
					uni.showModal({
						title: '请允许我们使用电话拨打权限',
						content: '允许后才能拨打电话给客户，与客户协商上门维修时间',
						mask: true,
						icon: 'none',
						showCancel: true,
						cancelText: '我知道了',
						confirmText: '前往设置',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting();
							}
						},
					});
				}
			},
		);
		// #endif
		// #ifdef H5
		callNumber(phoneNumber);
		// #endif
	};
	function callNumber(phoneNumber) {
		apiOrder.saveTriggerCallPhone(workId.value).then((res) => {
			if (res.code == 20000) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: (res) => {
						Promise.all([
							getNeworkOrderDetailObj(workId.value),
							getNetworkOrderDetailContentObj(workId.value),
						]).then((res) => {
							if (
								store.state.isManager
									? orderDetail.value.status == 4
									: orderDetail.value.status == 2
							) {
								shareShow();
							}
							callPhoneRef.value.open('bottom');
							isCallPhone.value = true;
							uni.hideLoading();
						});
					},
					fail: () => {
						// 权限开启失败提示用户手动打开权限
					},
				});
			}
		});
	}
	// 调取地理位置
	const getLocation = () => {
		uni.showLoading({
			title: '加载...',
		});
		let address =
			orderDetail.value?.province +
			orderDetail.value?.city +
			orderDetail.value?.area +
			orderDetail.value.town +
			orderDetail.value?.address;
		uni
			.request({
				url: ` https://restapi.amap.com/v3/geocode/geo?key=${store.state.key}&address=${address}`,
				method: 'GET',
			})
			.then((res) => {
				let addressObj: any = res.data;
				// 使用地图查看位置
				uni.openLocation({
					latitude: Number(
						Number(addressObj.geocodes[0].location.split(',')[1]).toFixed(6),
					),
					longitude: Number(
						Number(addressObj.geocodes[0].location.split(',')[0]).toFixed(6),
					),
					address:
						orderDetail.value?.province +
						orderDetail.value?.city +
						orderDetail.value?.area +
						orderDetail.value.town,
					name: orderDetail.value?.address,
					success: (res) => {},
					// 调用失败时的回调函数
					fail: function (res) {
						uni.showToast({
							icon: 'none',
							title: res,
						});
					},
				});
				uni.hideLoading();
			});
	};
    
    const expressInfo = ref({
        expressCompany: 1,
        expressNbr: ''
    })
    // 快递
    const expressOptions = [
        {
            text:'顺丰',
            value:'1'
        },
        {
            text:'圆通',
            value:'2'
        },
        {
            text:'中通',
            value:'3'
        },
        {
            text:'申通',
            value:'4'
        },
        {
            text:'韵达',
            value:'5'
        },
        {
            text:'京东',
            value:'6'
        },
        {
            text:'邮政',
            value:'7'
        },
        {
            text:'顺丰',
            value:'8'
        },
        {
            text:'德邦',
            value:'9'
        },
        {
            text:'百世',
            value:'10'
        },
    ]
    
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};
	// 预览图片
	const lookImg = (urls: any, index) => {
		uni.previewImage({
			urls: urls,
			current: index,
			indicator: 'number',
			// 先下载图片
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					var url = urls[data.index];
					// 先下载图片
					uni.downloadFile({
						url,
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({title: '保存成功！', icon: 'none'});
								},
								fail: () => {
									uni.showToast({title: '保存失败', icon: 'none'});
								},
							});
						},
					});
				},
			},
		});
	};
	// 商品一物一码展示
	const showGoodsCode = async (item) => {
		uni.showLoading({
			title: '加载中',
		});
		await apiOrder.getNetworkOrderDetailGoodsCode(item.id).then((res) => {
			if (res.code == 20000) {
				goodsList.value = {...item, codes: res.data.row};
			}
		});
		uni.hideLoading();
		popupGoodsCode.value.open();
	};
	// 复制
	const copy = (val: any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'success',
				});
			},
		});
	};
	// 获取工单详情
	const getNeworkOrderDetailObj = async (id) => {
		await apiOrder.getNeworkOrderDetail(id).then((res) => {
			if (res.code == 20000) {
				orderDetail.value = res.data.row;
				if (store.state.isManager) {
					if (
						!statusList.value.some((o) => o.status == orderDetail.value.status)
					) {
						uni.reLaunch({
							url: '/pages/pages_network/order/order',
						});
					}
				} else {
					if (
						!statusList2.value.some((o) => o.status == orderDetail.value.status)
					) {
						uni.reLaunch({
							url: '/pages/pages_network/order/order',
						});
					}
				}
			}
		});
	};
	// 获取工单详情-工单
	const getNetworkOrderDetailContentObj = async (id) => {
		await apiOrder.getNetworkOrderDetailContent(id).then((res) => {
			if (res.code == 20000) {
				DetailContentObj.value = res.data.row;
			}
		});
	};

	// 审核
	const checkOrder = () => {
		uni.redirectTo({
			url:
				'/pages/pages_network/order/checkOrder?workId=' +
				workId.value +
				'&networkEngineerId=' +
				orderDetail.value.networkEngineerId,
		});
	};
	// 更多
	const pageProgress = () => {
		uni.navigateTo({
			url: '/pages/pages_network/order/progress?workId=' + workId.value,
		});
	};
	/* 商品信息 */
	const getNetworkOrderDetailGoodsObj = async (id) => {
		await apiOrder.getNetworkOrderDetailGoods(id).then((res) => {
			if (res.code == 20000) {
				goodsDetail.value = res.data.row;
			}
		});
	};
	/* 工单取消弹窗 */
	const inputDialog = ref();
	const cancelShow = () => {
		inputDialog.value.open();
	};
	//提交取消
	const dialogInputConfirm = async (val) => {
		uni.showLoading({
			title: '加载中',
		});
		let data = {remark: val};
		await apiOrder.networkApplyCancelOrder(data, workId.value).then((res) => {
			if (res.code == 20000) {
				inputDialog.value.close();
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
			}
		});
		uni.hideLoading();
	};
	/* 拒绝接单 */
	const inputDialog_rej = ref();
	const rejectiveShow = () => {
		inputDialog_rej.value.open();
	};
	// 提交拒绝
	const dialogInputConfirmRej = async (val) => {
		uni.showLoading({
			title: '加载中',
		});
		let data = {remark: val};
		await apiOrder.networkRefuseReceiveOrder(data, workId.value).then((res) => {
			if (res.code == 20000) {
				uni.hideLoading();
				inputDialog_rej.value.close();
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
				uni.redirectTo({
					url: '/pages/pages_network/order/order?workId=' + workId.value,
				});
			}
		});
		uni.hideLoading();
	};
	// 申请改服务商
	const changeNetworkDialog = ref();
	const changeNetworkConfirm = async (val) => {
		uni.showLoading({
			title: '加载中',
		});
		let data = {remark: val};
		await apiOrder.networkApplyChangeNetwork(data, workId.value).then((res) => {
			if (res.code == 20000) {
				changeNetworkDialog.value.close();
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
			}
		});
		uni.hideLoading();
	};
	// 改工程师
	const changeNetworkEmpConfirm = async (val) => {
		uni.showLoading({
			title: '加载中',
		});
		let data = {remark: val};
		await apiOrder
			.networkApplyTransferEngineer(data, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					changeNetworkEmpDialog.value.close();
					Promise.all([
						getNeworkOrderDetailObj(workId.value),
						getNetworkOrderDetailContentObj(workId.value),
					]).then((res) => {
						if (
							store.state.isManager
								? orderDetail.value.status == 4
								: orderDetail.value.status == 2
						) {
							shareShow();
						}
						uni.hideLoading();
					});
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
				}
			});
		uni.hideLoading();
	};
	// 确认接单
	const rejectiveYes = async () => {
        if(orderDetail.value.isReturn === 1) {
            if(!expressInfo.value.expressCompany) {
                uni.showToast(
                    {
                        title:'请选择快递公司',
                        icon: 'none',
                    }
                )
                return
            }
            if(!expressInfo.value.expressNbr) {
                uni.showToast(
                    {
                        title:'请选择快递单号',
                        icon: 'none',
                    }
                )
                return
            }
        }
        
		uni
			.showModal({
				title: '提示',
				content: '确认接单？',
			})
			.then(async (res) => {
				//确认
				if (res.confirm) {
					uni.showLoading({
						title: '加载中',
					});
					await apiOrder.networkSureReceiveOrder(workId.value, expressInfo.value).then((res) => {
						if (res.code == 20000) {
							Promise.all([
								getNeworkOrderDetailObj(workId.value),
								getNetworkOrderDetailContentObj(workId.value),
							]).then((res) => {
								if (
									store.state.isManager
										? orderDetail.value.status == 4
										: orderDetail.value.status == 2
								) {
									shareShow();
								}
								uni.hideLoading();
							});
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					});
					uni.hideLoading();
				}
			});
	};
	// 解除挂载
	const networkEmpRestartSuspend = async () => {
		uni.showLoading({
			title: '加载中',
		});
		await apiOrder.networkEmpRestartSuspendOrder(workId.value).then((res) => {
			if (res.code == 20000) {
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: '取消挂起',
					icon: 'success',
				});
			}
		});
		uni.hideLoading();
	};
	// 分派工程师
	const AssignmentEngineer = () => {
		uni.redirectTo({
			url:
				'/pages/pages_network/order/networkEmp/networkEmp?workId=' +
				workId.value,
		});
	};
	// 获取预约时间范围
	const setTimeObj = ref({
		reservationTimeType: 2, //1-不启用，2-24小时，3-预约时间范围”
		reservationStartTime: '',
		reservationEndTime: '',
	});

	// 更多功能显示
	const shareShow = async () => {
		uni.showLoading({
			title: '加载中...',
		});

		if (store.state.isManager) {
			if (!orderDetail.value?.engineer) {
				moreIcons.value = moreIconsList.value.filter((o) => o.status != 8); //管理员不是工程师 没有申请转单
				moreIcons.value = moreIcons.value.filter((o) => o.status != 9); //管理员不是工程师 没有挂起
				moreIcons.value = moreIcons.value.filter((o) => o.status != 2); //工程师才有签到
			} else {
				moreIcons.value = moreIconsList.value;
			}
		} else {
			moreIcons.value = moreIconsList.value.filter((o) => o.status != 10);
		}
		Promise.all([setSign(), setTime(), getOrderSuspendConfigFun()]).then(() => {
			uni.hideLoading();
			// shareRef.value.open()
		});
	};

	const isOpenSign = ref(true);
	//判断是否开启签到
	const setSign = async () => {
		await apiOrder.getNetworkEmpIsEnableSign(workId.value).then((res) => {
			if (res.code == 20000) {
				if (!res.data.row.enableSign) {
					isOpenSign.value = false;
					moreIcons.value = moreIcons.value.filter((o) => o.status != 2);
				}
			}
		});
	};
	// 判断是否开启预约时间
	const setTime = async () => {
		await apiOrder.getNetworkReservationTimeRange(workId.value).then((res) => {
			if (res.code == 20000) {
				setTimeObj.value = res.data.row;
				if (setTimeObj.value.reservationTimeType == 1) {
					moreIcons.value = moreIcons.value.filter((o) => o.status != 1);
				}
			}
		});
	};
	// 判断工程师是否启用挂载
	const getOrderSuspendConfigFun = () => {
		apiOrder.getOrderSuspendConfig(workId.value).then((res) => {
			if (res.code == 20000) {
				if (!res.data.row.enableSuspend) {
					moreIcons.value = moreIcons.value.filter((o) => o.status != 9);
				}
			}
		});
	};
	// 关闭预约时间 显示弹窗
	const closePopup = () => {
		showTimeRef.value.close();
		// shareShow()
	};
	//显示选择预约时间弹窗
	const showpopupSelet = () => {
		showpopup.value = true;
		showTimeRef.value.close();
	};
	// 设置showpopup
	const showpopupValue = (val) => {
		showpopup.value = val;
		showTimeRef.value.open();
	};

	const timeOfAppointmentModelValue = ref({
		dateVal: {
			text: '',
			date: '',
		},
		time: '',
		chackDateIndex: 0,
		chackDateTimeIndex: 0,
		remark: '',
		lastEndTime: '',
		isAgainTimeOfAppointment: false,
	});

	const handleIsAgainTimeOfAppointment = (data) => {
		timeOfAppointmentModelValue.value.isAgainTimeOfAppointment =
			data.detail.value;
	};

	const handleTimeOfAppointmentRangeSelect = (obj: {
		chackDateIndex: number;
		chackDateTimeIndex: number;
		dateVal: {text: string; date: string};
		time: string;
	}) => {
		timeOfAppointmentModelValue.value.dateVal = obj.dateVal;
		timeOfAppointmentModelValue.value.time = obj.time;
		timeOfAppointmentModelValue.value.chackDateIndex = obj.chackDateIndex;
		timeOfAppointmentModelValue.value.chackDateTimeIndex =
			obj.chackDateTimeIndex;
	};

	const onTimeOfAppointmentConfirmClick = () => {
		if (workId.value) {
			let data = {
				date: timeOfAppointmentModelValue.value.dateVal.date,
				reservationEndTime:
					timeOfAppointmentModelValue.value.time.split('~')[1],
				reservationStartTime:
					timeOfAppointmentModelValue.value.time.split('~')[0],
				remark: timeOfAppointmentModelValue.value.remark,
				workId: workId.value,
				lastEndTime: timeOfAppointmentModelValue.value.lastEndTime,
			};
			uni.showLoading({
				title: '加载中...',
			});
			apiOrder.networkReservationTime(data).then((res) => {
				if (res.code == 20000) {
					Promise.all([
						getNeworkOrderDetailObj(workId.value),
						getNetworkOrderDetailContentObj(workId.value),
					]).then((res) => {
						if (
							store.state.isManager
								? orderDetail.value.status == 4
								: orderDetail.value.status == 2
						) {
							shareShow();
						}
						uni.hideLoading();
					});
					uni.showToast({
						icon: 'success',
						title: res.message,
					});
					timeOfAppointmentModelValue.value = {
						dateVal: {
							text: '',
							date: '',
						},
						time: '',
						chackDateIndex: 0,
						chackDateTimeIndex: 0,
						remark: '',
						lastEndTime: '',
						isAgainTimeOfAppointment: false,
					};
					showTimeRef.value.close();
				}
			});
		}
	};

	// 更多功能
	const onShare = (item) => {
		if (
			item.status == 3 ||
			item.status == 4 ||
			item.status == 5 ||
			item.status == 7
		) {
			if (
				(orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult) ||
				(!orderDetail.value?.reservation &&
					setTimeObj.value.reservationTimeType != 1)
			) {
				if (
					orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult
				) {
					uni.showToast({
						title: '请先拨打，填写拨打结果',
						icon: 'none',
					});
					return;
				} else {
					if (
						!orderDetail.value?.reservation &&
						setTimeObj.value.reservationTimeType != 1
					) {
						uni.showToast({
							title: '请先填写预约时间',
							icon: 'none',
						});
						return;
					}
				}
			}
			// 申请费用、备件、结单， 未签到且开启签到
			if (
				[3, 4, 5].includes(item.status) &&
				!orderDetail.value.signIn &&
				isOpenSign.value
			) {
				uni.showToast({
					title: '请先签到',
					icon: 'none',
				});
				return;
			}
		}
		switch (item.status) {
			case 1:
				if (
					orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult
				) {
					uni.showToast({
						title: '请先拨打，填写拨打结果',
						icon: 'none',
					});
					return;
				}
				showTimeRef.value.open();
				break;
			case 2:
				if (orderDetail.value) {
					const {province, city, area, town, address, dispatchEngineerId} =
						orderDetail.value;
					const text = province + city + area + town + address;
					uni.navigateTo({
						url: `/pages/pages_network/order/location/location?workId=${workId.value}&dispatchEngineerId=${dispatchEngineerId}&address=${text}`,
					});
				}
				break;
			case 3:
				uni.navigateTo({
					url: '/pages/pages_network/order/applyFee?workId=' + workId.value,
				});
				break;
			case 4:
				uni.navigateTo({
					url: '/pages/pages_network/order/applySpare?workId=' + workId.value,
				});
				break;
			case 5:
				if (store.state.userInfo.id != orderDetail.value.networkEngineerId) {
					uni
						.showModal({
							title: '提示',
							content: '您不是当前工单负责人，禁止结单！',
							showCancel: false,
						})
						.then((res) => {
							//确认
							if (res.confirm) {
								return;
							}
						});
					return;
				}
				if (
					orderDetail.value.hasApplyOrderFeeWaitCheck ||
					orderDetail.value.hasApplyOrderSpareWaitCheck
				) {
					uni
						.showModal({
							title: '提示',
							content: '此单存在待审核项，禁止结单！',
							showCancel: false,
						})
						.then((res) => {
							//确认
							if (res.confirm) {
								return;
							}
						});
					return;
				}

				uni.navigateTo({
					url: '/pages/pages_network/order/applyOrder?workId=' + workId.value,
				});
				break;
			// case 6:
			// 	break;
			case 7:
				uni.navigateTo({
					url: '/pages/pages_network/message/inputSend?workId=' + workId.value,
				});
				break;
			case 8:
				changeNetworkEmpDialog.value.open();
				break;
			case 9:
				uni.navigateTo({
					url: '/pages/pages_network/order/applyHangup?workId=' + workId.value,
				});
				break;
			case 10:
				changeNetworkDialog.value.open();
				break;
			default:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 1000,
					icon: 'none',
				});
				break;
		}
		shareRef.value.close();
	};

	// 下拉刷新触发
	const triggered = ref(false);
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
		triggered.value = true;
	};
	const onRefresh = async () => {
		await swichMenu(currentTab.value);
		setTimeout(() => {
			triggered.value = false;
		}, 500);
	};
</script>

<style lang="scss" scoped>
	.order_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.input_popup {
			display: flex;
			flex-direction: column;
			flex: 1;

			.red_tip_title {
				color: #f53f3f;
				font-size: 24rpx;
				margin-top: 14rpx;
			}
		}

		.mask_more {
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			position: absolute;
			z-index: 9999;

			.btn_more {
				position: absolute;
				bottom: 120rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx 1rpx #ccc;
				right: 48rpx;

				.text_sty {
					font-size: 32rpx;
					padding: 22rpx;
					text-align: center;

					&:first-child {
						border-bottom: 1rpx solid #ccc;
					}
				}

				&::after {
					content: '';
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					border-top: 12rpx solid #ccc;
					position: absolute;
					bottom: -12rpx;
					right: 20%;
				}
			}
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			position: relative;

			:deep(.uni-scroll-view) {
				-ms-overflow-style: none;
				/* IE and Edge */
				scrollbar-width: none;

				/* Firefox */
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}
			}

			.top-menu-view {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				background-color: #ffffff;
				height: 86rpx;
				line-height: 86rpx;
				border-bottom: 1rpx solid #d8dbe6;
				position: fixed;
				z-index: 2;

				.menu-topic-view {
					display: inline-block;
					height: 86rpx;
					position: relative;

					.menu-topic-text {
						font-size: 28rpx;
						color: #303133;

						box-sizing: border-box;
						margin: 0 20rpx;
						position: relative;
						z-index: 2;
						font-weight: 700;
					}

					.menu-topic-bottom {
						position: absolute;
						bottom: 4rpx;
						left: 0;
						right: 0;
						margin: 0 20rpx;

						.menu-topic-bottom-color {
							width: 100%;
							height: 4rpx;
						}
					}

					.menu-topic,
					.menu-topic-act {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}

					.menu-topic-act {
						.menu-topic-text {
							font-weight: 700;
							color: #007cff;
						}

						.menu-topic-bottom {
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom-color {
							background: #007cff;
						}
					}
				}
			}

			.swiper-box-list {
				// width: 100%;
				flex: 1;
				margin-top: 86rpx;

				.swiper-topic-list {
					width: 100%;

					.scroll_content {
						height: 100%;
						box-sizing: border-box;

						.scroll-view_list {
							height: 100%;

							.list-item_content {
								padding-bottom: 180rpx;

								.list-item_info_fee {
									background-color: #ffffff;
									margin: 24rpx;
									padding: 24rpx;
									font-size: 28rpx;
									border-radius: 8rpx;
									display: flex;
									flex-direction: column;

									.down_up {
										width: 0;
										height: 0;
										border-right: 12rpx solid transparent;
										border-left: 12rpx solid transparent;
										border-top: 14rpx solid #999;
										margin-left: 32rpx;
									}

									.down_up_ {
										width: 0;
										height: 0;
										border-right: 12rpx solid transparent;
										border-left: 12rpx solid transparent;
										border-bottom: 14rpx solid #999;
										margin-left: 32rpx;
									}

									:deep(.uni-section-header) {
										padding: 0;
									}

									.td {
										text-align: center;
									}

									.lable {
										display: flex;
										align-items: center;
									}
								}
							}

							.notice_bar {
								font-size: 28rpx;
								color: #f53f3f;
								background-color: rgba(255, 236, 232, 1);
								height: 72rpx;
								line-height: 72rpx;
								padding: 0 24rpx;
								display: flex;
								align-items: center;
								// justify-content: space-between;

								// margin: 24rpx 0;
								.info_filled {
									background-color: #f53f3f;
									color: #ffffff;
									width: 30rpx;
									height: 30rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 50%;
									margin: 0 10rpx;
									font-size: 24rpx;
								}
							}

							.list-item {
								background-color: #ffffff;
								margin: 24rpx;
								padding: 24rpx;
								padding-right: 12rpx;
								font-size: 28rpx;
								border-radius: 8rpx;
								position: relative;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								row-gap: 14rpx;

								&_info {
									display: flex;
									justify-content: space-between;
									align-items: center;
									background-color: #ffffff;
									margin: 24rpx;
									padding: 24rpx;
									font-size: 28rpx;
									border-radius: 8rpx;

									&_left {
										flex-grow: 2;
										font-size: 28rpx;
										flex: 1;

										&_name_phone {
											display: flex;

											flex-direction: column;

											.name {
												margin-right: 20rpx;
												margin-bottom: 12rpx;
												display: flex;
												flex-wrap: wrap;
												font-weight: bold;
											}
										}

										.call_status {
											display: flex;
											align-items: center;
											// justify-content: flex-end;
											// width: 100%;
											margin-left: 20rpx;
											// margin-bottom: 22rpx;
											line-height: 28rpx;
											font-size: 28rpx;
											transform: scale(0.8);
										}

										.address {
											// font-weight: bold;
											// color: #999;
											width: 100%;
											text-overflow: ellipsis;
											overflow: hidden;
											white-space: pre-wrap;
											margin-top: 12rpx;
										}

										.list-item_info_right {
											display: flex;

											// justify-content: space-between;
											// flex-direction: column;
											// align-items: center;
											// width: 20%;
											// font-size: 24rpx;
											.call_status {
												display: flex;
												align-items: center;
												// justify-content: flex-end;
												// width: 100%;
												// margin-bottom: 22rpx;
												line-height: 28rpx;
											}

											&_btn {
												display: flex;
												justify-content: space-between;
												// width: 100%;

												gap: 20rpx;

												.bg_btn {
													background-color: #007cff20;
													border-radius: 50%;
													padding: 6rpx;
													margin-left: 22rpx;
												}
											}
										}
									}

									&_right {
										display: flex;
										justify-content: space-between;
										flex-direction: column;
										align-items: center;
										margin-bottom: 10rpx;
										font-size: 24rpx;

										.call_status {
											display: flex;
											align-items: center;
											justify-content: flex-end;
											width: 100%;
											margin-bottom: 20rpx;
											line-height: 28rpx;
										}

										&_btn {
											display: flex;
											justify-content: space-between;
											width: 100%;

											gap: 20rpx;

											.bg_btn {
												background-color: #007cff20;
												border-radius: 50%;
												padding: 6rpx;
												margin-left: 22rpx;
											}
										}
									}
								}

								&_title {
									display: flex;
									align-items: center;
									font-size: 32rpx;
									flex-wrap: wrap;

									.module {
										color: #00c0c0;
										font-size: 24rpx;
										margin-left: 12rpx;
									}
								}

								.list-item_finish_order {
									display: flex;
									flex-direction: column;
									row-gap: 14rpx;
								}

								&_lable {
									display: flex;
									align-items: flex-start;
									// justify-content: space-between;
									color: #777;
									// margin-bottom: 12rpx;

									&_title {
										display: flex;
										align-items: center;
										// width: 196rpx;
										justify-content: flex-end;
									}

									.cont {
										color: #000;
										display: flex;
										align-items: center;
										flex-wrap: wrap;
										flex: 1;
										gap: 14rpx;
										word-wrap: break-word;
										word-break: break-all;

										.level {
											margin-left: 12rpx;
											font-size: 24rpx;
										}

										.cont_img {
											width: 80rpx;
											height: 80rpx;
											box-shadow: 0 0 2rpx 2rpx #e8e8e8;
										}

										.pdf_sty {
											background-color: rgb(250, 81, 81);
											width: 80rpx;
											height: 80rpx;
											color: #fff;
											text-align: center;
											font-size: 22rpx;
											position: relative;
											display: flex;
											align-items: center;
											justify-content: center;

											&:before {
												content: '';
												position: absolute;
												z-index: 2;
												border: 12rpx solid #0000002b;
												right: 0rpx;
												top: 0rpx;
												border-top: 12rpx solid #fff;
												border-right: 12rpx solid #fff;
											}
										}
									}
								}

								&_top {
									display: flex;
									align-items: flex-start;
									justify-content: space-between;

									.more {
										color: #007cff;
										display: flex;
										align-items: center;
										font-size: 28rpx;
									}

									&_right {
										display: flex;
										align-items: center;
										font-size: 24rpx;

										.tip {
											color: rgba(245, 108, 108, 1);
											margin-right: 10rpx;
										}

										._tag {
											font-size: 22rpx;
											border-radius: 25rpx 0 0 25rpx;
											color: #ffffff;
											padding: 8rpx 16rpx;
											position: relative;
											right: -17rpx;
											// right: -5rpx;

											&::after {
												content: '';
												position: absolute;
												right: -5rpx;
												bottom: -5rpx;
												border: 5rpx solid transparent;
												border-left-width: 5rpx;
												border-left-color: var(--item-color);
											}
										}
									}
								}

								.log_item {
									position: relative;
									// border-left: 4rpx dashed #EAECEE;
									margin: 24rpx;

									// &:last-child {
									// 	border-left: 4rpx dashed transparent;
									// }

									.icon_item {
										position: absolute;
										left: -22rpx;
										top: -5rpx;
									}

									.block_item {
										padding: 0 0 0rpx 24rpx;

										.title_span {
											.title {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 28rpx;
												color: #007cff;
											}

											.content_text {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 24rpx;
												text-indent: 0.5em;
												margin-top: 12rpx;
											}

											.content_time {
												font-size: 24rpx;
												text-indent: 0.5em;
												margin: 0rpx 0 12rpx;
												color: #777;
											}
										}
									}
								}
							}

							.goods_info {
								margin: 24rpx;
								box-sizing: border-box;
								background-color: fafafa;
								padding-bottom: 300rpx;

								.goods_info_item_li {
									display: flex;
									justify-content: center;
									flex-direction: column;
									align-items: center;
									position: relative;
									padding: 24rpx 8rpx 24rpx 24rpx;
									background-color: #fff;
									margin: 32rpx 0;

									.goods_info_conent {
										display: flex;
										align-items: center;
										width: 100%;
										flex: 1;

										.left_img {
											width: 180rpx;
											height: 180rpx;
											box-shadow: 0 0 2rpx 2rpx #eee;
											border-radius: 10rpx;
											margin: 0 20rpx 0 0;

											.img {
												width: 100%;
												height: 100%;
												border-radius: 20rpx;
											}
										}

										.right_text {
											font-size: 24rpx;
											// margin-right: 20rpx;
											flex: 1;
											position: relative;
											display: flex;
											flex-direction: column;
											gap: 12rpx;

											.brands {
												// font-weight: bold;
												font-size: 28rpx;
												display: -webkit-box;
												-webkit-line-clamp: 2;
												-webkit-box-orient: vertical;
												overflow: hidden;
												word-wrap: break-word;
												word-break: break-all;
											}

											.pt {
												display: flex;
												align-items: center;
												width: 100%;
												justify-content: flex-start;

												.num_b {
													display: flex;
													align-items: center;

													&_qty {
														background-color: #f53f3f;
														color: #fff;
														border-radius: 6rpx;
														padding: 0 6rpx;
													}
												}

												.tip {
													color: #777;
												}

												.lis {
													display: -webkit-box;
													-webkit-line-clamp: 2;
													-webkit-box-orient: vertical;
													overflow: hidden;
													word-wrap: break-word;
													word-break: break-all;
													flex: 1;
												}

												.lis_code {
													color: #007cff;
													text-overflow: ellipsis;
													white-space: nowrap;
													overflow: hidden;
													font-size: 24rpx;
													flex: 1;
												}
											}

											.look_some {
												text-align: center;
											}
										}
									}
								}
							}

							.log_list {
								padding: 12rpx 24rpx 200rpx;
								margin: 24rpx;

								.log_item {
									position: relative;
									border-left: 4rpx dashed #eaecee;

									&:last-child {
										border-left: 4rpx dashed transparent;
									}

									.icon_item {
										position: absolute;
										left: -20rpx;
										top: -5rpx;
										z-index: 9;
									}

									.block_item {
										padding: 0 0 40rpx 24rpx;

										.title_span {
											.title {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 28rpx;
												color: #007cff;
											}

											.content_text {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 24rpx;
												text-indent: 0.5em;
												margin-top: 12rpx;
											}

											.content_time {
												font-size: 24rpx;
												text-indent: 0.5em;
												margin: 0rpx 0 12rpx;
											}
										}
									}
								}
							}
						}

						.footer_order {
							display: flex;
							align-items: center;
							background-color: #ffffff;
							z-index: 99;
							height: 120rpx;
							position: fixed;
							bottom: 0;
							width: 100%;
							padding: 48rpx;
							box-sizing: border-box;
							border-top: 1rpx solid rgba(177, 177, 177, 0.1);
							gap: 24rpx;

							&_left {
								flex: 1;
								height: 80rpx;
								background-color: rgba(245, 108, 108, 1);
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 40rpx;
								width: 50%;
							}

							&_left_ {
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 24rpx;
								margin-left: 32rpx;
								width: 14%;
								height: 80rpx;
								color: #007cff;
								font-size: 28rpx;
								font-weight: bold;
							}

							&_right {
								flex: 1;
								height: 80rpx;
								background-color: #007cff;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 40rpx;
							}

							&:has(.footer_order_right_) {
								display: none;
							}
						}
					}
				}
			}
		}

		.popup_list {
			padding: 0 24rpx;
			height: 70vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
			}

			.height_list {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.left_img {
					width: 180rpx;
					height: 180rpx;
					box-shadow: 0 0 20rpx 2rpx #eee;
					border-radius: 10rpx;
					margin: 0 20rpx 0 0;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.right_text {
					font-size: 24rpx;
					margin-right: 12rpx;
					flex: 1;
					position: relative;

					.brands {
						word-wrap: break-word;
						word-break: break-all;
						font-weight: bold;
						font-size: 28rpx;
						margin: 0 0 10rpx;
					}

					.ms {
						display: flex;
						align-items: center;
						width: 100%;
						word-wrap: break-word;
						word-break: break-all;
						margin: 8rpx;

						.tip {
							color: #777;
						}
					}
				}
			}

			.list_ovh {
				height: 600rpx;
				overflow: auto;

				.way_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					width: 85%;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.share_box {
			background-color: #ffffff;
			margin: 24rpx;
			padding: 24rpx;
			padding-right: 12rpx;
			font-size: 28rpx;
			border-radius: 8rpx;

			.share_content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					width: 20%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding: 12rpx;
					box-sizing: border-box;

					.icon_img {
						width: 80rpx;
						height: 80rpx;
						padding: 12rpx 0;
					}

					.icon_name {
						font-size: 26rpx;
					}
				}
			}

			.cancel_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				border: 1rpx solid rgba(229, 230, 235, 1);
				margin: 40rpx 24rpx 0;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}

		.popup-time_show {
			background-color: #fff;
			height: 700rpx;
			border-radius: 20rpx 20rpx 0 0;
			width: 100%;

			.lable_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				margin: 0 32rpx;
				font-weight: bold;
				font-size: 32rpx;

				.lable_btn {
					color: #007cff;
					font-size: 28rpx;
				}
			}

			.bodyer_time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 32rpx 24rpx;

				&_left {
					font-size: 28rpx;

					&_tip {
						color: #999;
					}
				}

				&_right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
				}
			}

			.remark {
				margin: 32rpx 24rpx;

				.label {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}
			}
		}

		.call_phone_popup {
			background-color: #fff;
			height: 680rpx;
			border-radius: 20rpx 20rpx 0 0;
			width: 100%;

			.lable_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				margin: 0 32rpx;
				font-weight: bold;
				font-size: 32rpx;

				.lable_btn {
					color: #007cff;
					font-size: 28rpx;
				}
			}

			.call_content {
				padding: 0 32rpx 32rpx;

				.bodyer_time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 32rpx 0;

					&_left {
						font-size: 28rpx;

						&_tip {
							color: #999;
						}
					}

					&_right {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
					}
				}

				.table {
					font-size: 28rpx;
					font-weight: bold;
					margin: 24rpx 0 12rpx;
				}

				.text_input {
					// margin: 24rpx 0 0 32rpx;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						background-color: rgb(243, 244, 248);
					}

					padding: 12rpx 12rpx 24rpx;
					background-color: rgb(243, 244, 248);

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}

				.call_btn {
					margin: 24rpx;
					height: 80rpx;
					background-color: #007cff;
					border-radius: 40rpx;
					color: #fff;
					font-size: 30rpx;
					text-align: center;
					line-height: 80rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
				}
			}
		}
	}
    
    .textPopup {
        background-color: #fff;
        border-radius: 20rpx;
        width: 750rpx;
        
        .lable_top {
        	display: flex;
        	align-items: center;
        	justify-content: space-between;
        	line-height: 100rpx;
        	background-color: #fff;
        	border-radius: 40rpx 40rpx 0 0;
        	height: 100rpx;
        	border-bottom: 1rpx solid #eee;
        	margin: 0 32rpx;
        	font-weight: bold;
        	font-size: 32rpx;
        
        	.lable_btn {
        		color: #007cff;
        		font-size: 28rpx;
        	}
        }
        .textContent {
            height: 800rpx;
            overflow: auto;
            padding: 40rpx;
            .title {
                font-weight: bold;
            }
            .item {
                margin-bottom: 20rpx;
                font-size: 28rpx;
            }
        }
    }
    .formSelect {
       :deep(.uni-select__selector) {
           height: 240rpx;
           overflow: auto;
       } 
    }
</style>
